<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
    <style>
        .c1{
            color:red;
            background: pink;
            line-height: 100px;
            text-align: center;
        }
        .c2{
            text-align: right;
        }
        .top{
            vertical-align: top;
        }
        .middle{
            vertical-align: middle;
        }
        .bottom{
            vertical-align: bottom;
        }
        .c4{
            /*text-indent: 100px;*/
            text-indent: 50%;
        }
        .c5{
            text-decoration: overline;
        }
        .c6{
            text-decoration: line-through;
        }
        .c7{
            text-decoration: underline;
        }
        .c8{
            text-transform: capitalize;
        }
        .c9{
            letter-spacing: 10px;
        }
        .c10{
            word-spacing: 50px;
        }
        .c11{
            white-space: nowrap;
        }
    </style>
</head>
<body>
<div class="c1">这是一个div</div>
<div class="c2">这是c2</div>
<div class="c3">
    <p>这是一幅<img class="top" src="../images/heihei.gif"></img>上对齐的图片</p>
    <p>这是一幅<img class="middle" src="../images/heihei.gif"></img>垂直居中的图片</p>
    <p>这是一幅<img class="bottom" src="../images/heihei.gif"></img>下对齐的图片</p>
</div>
<div class="c4">Hello World</div>
<div class="c5">这是上划线的文本</div>
<div class="c6">这是删除线的文本</div>
<div class="c7">这是下划线的文本</div>
<div class="c8">heLLo world</div>
<div class="c9">测试字符间距,Hello World</div>
<div class="c10">测试单词间距 空格是单词的分隔符 Hello World</div>
<div class="c11">
    层叠样式表（Cascading Style Sheet，CSS）有助于实现负责任的Web设计。CSS对开发者构建Web站点的影响很大，并且这种影响可能是无止境的。将网页的大部分甚至是全部的表示信息从（X）HTML文件中移出，并将它们保留在一个样式表中有诸多优点，如降低文件大小、节省网络带宽以及易于维护等。此外，站点的表现信息和核心内容相分离，使得站点的设计人员能够在短暂的时间内对整个网站进行各种各样的修改。 [14]
</div>
</body>
</html>